<template>
  <div style="height: calc(100% - 15px);padding: 15px;padding-top: 0px;" :class="theme === 'dark' ? 'view':theme === 'light' ? 'view2':'view'">
    <el-row class="box" style="height:100%">
      <el-col :span="9" class="leftBox">
        <header>
          <div :class="theme === 'dark' ? 'headline headLeft' : 'headline'">
            <span :class="theme != 'dark' ? 'fontbold':''"><i :class="theme === 'dark' ? 'iconfont icon-biaozhu':'iconfont el-icon-s-tools'"></i>{{$t("userinfo.role")}}</span>
          </div>
          <div class="msg">
            <span><i class="iconfont icon-message"> :</i>{{$t("authority.rolePrompt")}}</span>
          </div>
        </header>
        <div class="content">
          <el-radio v-for="item in roleIds" v-model="radio" @change='getMenuData(radio)' :label="item.roleId" :key="item.roleId" border>{{item.roleName}}</el-radio>
        </div>
      </el-col>
      <el-col :span="15" class="rightBox">
        <header :style="theme != 'dark'?'display:none':''">
          <div class="headline headRight">
            <span><i class="iconfont icon-biaozhu"></i>{{$t("authority.distribution")}}</span>
          </div>
          <div class="msg">
            <span><i class="iconfont icon-message"> :</i>{{$t("authority.prompt")}}</span>
          </div>
        </header>
        <div class="content ">
          <!-- 总全选-->
          <div class="rightTop">
            <el-checkbox v-show="menuData.length==0 ? false : true" class="checkedAll" :indeterminate="indeterminate" v-model="isCheckAll"
                       @change="checkAll">{{$t("authority.check")}}
          </el-checkbox>
          <el-button type="primary" class="save" @click="save" icon="el-icon-document-checked">{{$t("public.save")}}</el-button>
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(one,oneIndex) in menuData" :key="oneIndex" :name='oneIndex'>
              <template slot="title">
                <!-- 一级 权限列表-->
                <el-checkbox :indeterminate="one.indeterminate" v-model="one.menuBool"
                             @change="checkedOneAll(oneIndex,one.menuId,$event)"
                             :key="oneIndex">{{ one.menuName }}
                </el-checkbox>
              </template>
              <!-- 二级 权限列表-->
              <el-checkbox v-for="(two,twoIndex) in one.children" v-model="two.menuBool"
                           @change="checkedTwoAll(oneIndex,twoIndex,two.menuId,one.menuId,$event)"
                           :indeterminate="two.indeterminate" :key="twoIndex">{{two.menuName}}
                <div style="position: absolute" v-if="two.children.length>0">
                  <el-checkbox style="display:block;line-height: 2" v-for="(three,threeIndex) in two.children"
                               :key="threeIndex"
                               v-model="three.menuBool"
                                :title="three.menuName"
                               @change="checkedThreeAll(oneIndex,twoIndex,threeIndex,three.menuId,two.menuId,one.menuId,$event)"
                  >{{three.menuName}}
                  </el-checkbox>
                </div>
              </el-checkbox>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleIds:[], //角色信息
      radio: null, //角色选择
      activeNames: [0,1,2,3,4,5,6,7], //默认展开的title列表
      menuData:[],//权限选项列表
      isCheckAll: false,//一级全选状态
      indeterminate: false,
      Menuid: [], //发送选中菜单集
      theme:this.$store.state.theme, //主题切换  dark / light
    };
  },
  mounted() {
    // this.getUserinfo();
    this.getRole();
  },
  methods: {
    //获取数组中的某一属性集合
    getAttrs(array,attr) {
      let arr = array.map((item)=>{
          return item[attr];
      })
      return arr;
    },
    //删除
    remove(arr, item){
      if(!arr.length){
        return;
      }
      var index = arr.indexOf(item);
      if(index > -1){
        arr.splice(index, 1);
      }	
    },
    //添加
    add(arr, item) {
      if(arr.indexOf(item)>=0){
        return false;
      }else{
        arr.push(item)
      }
    },

    //总change事件
      checkAll(e) {
        this.ischeckAll = e;
        if (e === true) {
          this.indeterminate = false;
          for (var i = 0, len = this.menuData.length; i < len; i++) { //二级全选反选不确定
            this.menuData[i].menuBool = e;
            this.menuData[i].indeterminate = false;
            this.add(this.Menuid,this.menuData[i].menuId)
            for (var j = 0, len1 = this.menuData[i].children.length; j < len1; j++) {
              this.menuData[i].children[j].menuBool = e;
              this.add(this.Menuid,this.menuData[i].children[j].menuId)
              for (var k = 0, len2 = this.menuData[i].children[j].children.length; k < len2; k++) {
                this.menuData[i].children[j].children[k].menuBool = e
                this.add(this.Menuid,this.menuData[i].children[j].children[k].menuId)
              }
            }
          }
        } else {
          this.indeterminate = false;
          for (var i = 0, len = this.menuData.length; i < len; i++) { //三级全选反选不确定
            this.menuData[i].menuBool = e;
            this.menuData[i].indeterminate = false;
            this.remove(this.Menuid,this.menuData[i].menuId)
            for (var j = 0, len1 = this.menuData[i].children.length; j < len1; j++) {
              this.menuData[i].children[j].menuBool = e;
              this.remove(this.Menuid,this.menuData[i].children[j].menuId)
              for (var k = 0, len2 = this.menuData[i].children[j].children.length; k < len2; k++) {
                this.menuData[i].children[j].children[k].menuBool = e
                this.remove(this.Menuid,this.menuData[i].children[j].children[k].menuId)
              }
            }
          }
        }
      },
      //一级change事件
      checkedOneAll(oneIndex, oneId, e) {
        this.menuData[oneIndex].menuBool = e;//一级勾选后，子级全部勾选或者取消
        if (e === true) {
          //去掉一级不确定状态
          this.menuData[oneIndex].indeterminate = false;
        }
        let childrenArray = this.menuData[oneIndex].children;
        if (childrenArray.length>0 && e === true) {
          childrenArray.forEach(oneItem=>{
            oneItem.menuBool = e;
            this.add(this.Menuid,oneItem.menuId)
            if(oneItem.children.length>0){
              oneItem.children.forEach(twoItem=>{
                this.add(this.Menuid,twoItem.menuId)
                twoItem.menuBool=e;
              })
            }
          })
          this.add(this.Menuid,oneId)
        }else if (childrenArray.length>0 && e === false){
          childrenArray.forEach(oneItem=>{
            this.remove(this.Menuid,oneItem.menuId)
            oneItem.menuBool = e;
            if(oneItem.children.length>0){
              oneItem.children.forEach(twoItem=>{
                twoItem.menuBool=e;
                this.remove(this.Menuid,twoItem.menuId)
              })
            }
          })
          this.remove(this.Menuid,oneId)
        }else if(childrenArray.length == 0 && e === true){
          this.add(this.Menuid,oneId)
        }else{
          this.remove(this.Menuid,oneId)
        }
        this.getIsCheckAll()
      },
      //二级change事件
      checkedTwoAll(oneIndex, twoIndex, twoId, oneId, e) {
        var childrenArray = this.menuData[oneIndex].children;
        var tickCount = 0, unTickCount = 0, len = childrenArray.length;
        for (var i = 0; i < len; i++) {
          if (twoId === childrenArray[i].menuId) {
            childrenArray[i].menuBool = e;
            if(e === true){
              this.add(this.Menuid,twoId)
            }else if(e===false){
              this.remove(this.Menuid,twoId)
            }
          }
          if (childrenArray[i].menuBool === true) tickCount++;
          if (childrenArray[i].menuBool === false) unTickCount++
        }
        if(tickCount == 0){
          this.remove(this.Menuid,oneId)
        }
        //判断二级下面是否还有三级，点击选择二级(选择与不选）时候下面三级是全选还是全不选
        if (childrenArray[twoIndex].children.length > 0) {
          childrenArray[twoIndex].children.forEach(threeItem => {
            threeItem.menuBool = e;
            if(e === true){
              this.add(this.Menuid,threeItem.menuId)
            }else if(e===false){
              this.remove(this.Menuid,threeItem.menuId)
            }
          });
          //判断二级是否选中
          childrenArray[twoIndex].menuBool=e;
          if(e===true){
            childrenArray[twoIndex].indeterminate=false;
          }
        }
        if (tickCount === len) {//二级全勾选
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = false
        } else if (unTickCount === len) {//二级全不勾选
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = false
        } else {
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = true //添加一级不确定状态
        }
        if(e === true){
          this.add(this.Menuid,oneId)
        }

        this.getIsCheckAll()
      },
      //三级change事件
      checkedThreeAll(oneIndex, twoIndex, threeIndex, threeId, twoId,oneId, e) {
        let childrenArray = this.menuData[oneIndex].children[twoIndex].children;
        let childArr = this.menuData[oneIndex].children;
        let tickCount = 0, unTickCount = 0, len = childrenArray.length;
        for (let i = 0; i < len; i++) {
          if (threeId === childrenArray[i].menuId) {
            childrenArray[i].menuBool = e;
            if(e === true){
              this.add(this.Menuid,threeId)
              this.add(this.Menuid,twoId)
            }else if(e===false){
              this.remove(this.Menuid,threeId)
            }
          }
          if (childrenArray[i].menuBool === true) tickCount++;
          if (childrenArray[i].menuBool === false) unTickCount++
        }
        if(tickCount == 0){
          this.remove(this.Menuid,twoId)
        }
        if (tickCount === len) {
          this.menuData[oneIndex].children[twoIndex].menuBool = true;
          this.menuData[oneIndex].children[twoIndex].indeterminate = false;
          this.menuData[oneIndex].menuBool = false;
          this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态
        } else if (unTickCount === len) {
          this.menuData[oneIndex].children[twoIndex].menuBool = false;
          this.menuData[oneIndex].children[twoIndex].indeterminate = false;
        } else if (tickCount !== len) {
          this.menuData[oneIndex].children[twoIndex].menuBool = true;
          this.menuData[oneIndex].children[twoIndex].indeterminate = true;
          this.menuData[oneIndex].menuBool = false;
          this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态
        }
        let isArr = this.getAttrs(childArr,"menuBool")
        if(isArr.indexOf(true) < 0){
          this.remove(this.Menuid,oneId)
          this.menuData[oneIndex].menuBool = false;
          this.menuData[oneIndex].indeterminate = false; //添加二级不确定状态
        }
        if(e === true){
          this.add(this.Menuid,oneId)
        }
        this.getIsCheckAll()
      },
      /**
       *是否全选
       */
      getIsCheckAll() {
        var tickCount = 0, unTickCount = 0, ArrLength = this.menuData.length;
        for (var j = 0; j < ArrLength; j++) {//全选checkbox状态
          if (this.menuData[j].menuBool === true) tickCount++;
          if (this.menuData[j].menuBool === false) unTickCount++
        }
        if (tickCount === ArrLength) {//二级全勾选
          this.isCheckAll = true;
          this.indeterminate = false
        } else if (unTickCount === ArrLength) {//二级全不勾选
          this.isCheckAll = false;
          this.indeterminate = false
        } else {
          this.isCheckAll = false;
          this.indeterminate = true //添加一级不确定状态
        }
      },
    //获取角色信息列表
    async getRole() {
      let roleIds = await this.$api.management.getseleRole();
      this.roleIds = roleIds.data;
    },
    //获取列表数据
    async getMenuData(radio) {
      try {
        let params = {
          roleid: radio,
        }
        let RoleMenu = await this.$api.management.getRoleMenu(params);
        this.Menuid = this.getAttrs(RoleMenu.data2,'menuId')
        this.menuData = RoleMenu.data;
        this.menuData.forEach((oneItem,oneIndex) => {
          if (oneItem.children.length > 0) {
            let oneCountNum = oneItem.children.length;
            let isOneCheckedNum = 0;
            oneItem.children.forEach(twoItem => {
              if (twoItem.menuBool) {
                isOneCheckedNum += 1;
              }
              if (twoItem.children.length > 0) {
                let twoCountNum = twoItem.children.length;
                let isTwoCheckedNum = 0;
                twoItem.children.forEach(three => {
                  if (three.menuBool) {
                    isTwoCheckedNum += 1;
                  }
                });
                twoItem.menuBool = isTwoCheckedNum === twoCountNum;
                twoItem.indeterminate = isTwoCheckedNum > 0 && isTwoCheckedNum < twoCountNum;
              }
            });
            oneItem.menuBool = isOneCheckedNum === oneCountNum;
            oneItem.indeterminate = isOneCheckedNum > 0 && isOneCheckedNum < oneCountNum;
          }
        });
        this.getIsCheckAll()
      } catch (e) {
        console.log(e)
      }
    },
    //保存
    async save(){
      try {
        let params = {
          roid: this.radio,
          Menuid: this.Menuid,
        }
        let res = await this.$api.management.setRoleMenu(params)
        if(res.code == 200){
            this.$message({
              showClose: true,
              message: this.$t('public.savasuccess'),
              type: "success"
            });
            this.getMenuData(params.roid)
          }else{
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
      } catch (e) {
        console.log(e)
      }
    }
  },
  filters:{
      filterName(value){
        return value.substring(0,
          5)+'...'
      }
    }
            
}
</script>

<style lang="less" scoped>
.view{
  //margin-top: 20px;
  .box{
    display: flex;
    justify-content: space-between;
    .leftBox{
      margin-right: 15px;
      background: #172a4d;
      .content{
        display: flex;
        flex-direction: column;
        .el-radio{
          display: flex;
          justify-content: space-between;
          margin: 0;
          border: 0;
        }
        .is-checked{
          background: #203965;
          border: 1px #254276 solid;
          border-left: 5px #cb993d solid;
        }
      }
    }
    .rightBox{
      background: #10203C;
      .rightTop{
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .save{
          width: 84px;
          height: 31px;
          margin: 0 15px;
          display: flex;
          align-items: center;
        }
      }
    }
    header{
      .headline{
        height: 52px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:  0 90px;
        line-height: 40px;
        font-size: 16px;
        .el-button{
          height: 34px;
        }
      }
      .msg{
        height: 32px;
        background: #017ffb;
        line-height: 32px;
        padding-left: 15px;
        margin: 0 10px;
      }
    }
  }
  .headLeft{
    background: url(../../../assets/authority1.png) no-repeat;
    background-size: 100% 100%;
  }
  .headRight{
    background: url(../../../assets/authority2.png) no-repeat;
    background-size: 100% 100%;
  }
  .checkedAll{
    line-height: 58px;
    padding-left: 5px;
  }
  .content{
    /deep/.el-collapse-item__header, /deep/.el-collapse-item__wrap{
      border: none;
      padding: 0 20px;
    }
  }
  /deep/.el-collapse-item__header{
    background: #00507b;
    height: 32px;
  }
  /deep/ .el-collapse-item__content {
      padding-bottom: 0;
      // height: 157px;
      line-height: 50px;
  }
  /deep/.el-checkbox{
    margin-right: 40px!important;
  }
  .el-collapse-item:nth-child(4){
    /deep/ .el-collapse-item__content{
      height: 200px;
      display: flex;
      justify-content: space-between;
    }
  }
  .icon-biaozhu{
    font-size: 12px;
    margin-right: 5px;
    color: #fda96b;
  }
  .el-collapse{
    border: 0;
  }
  .icon-message{
    font-size: 20px;
    margin-right: 10px;
    color: #fda96b;
  }
}
//浅色系
.view2{
  .fontbold{
    font-weight: bold;
    color: #3e86fb;
  }
  // margin-top: 20px;
  .box{
    display: flex;
    justify-content: space-between;
    .leftBox{
      margin-right: 15px;
      background: #f7fbff;
      box-shadow: 4px 3px 8px #E1E2E3;
      .content{
        display: flex;
        flex-direction: column;
        .el-radio{
          display: flex;
          justify-content: space-between;
          margin: 0;
          border: 0;
          color: #68808b;
        }
        /deep/.el-radio__inner{
          background: none;
        }
        .is-checked{
          border-radius: 0px;
          background: #E5F6FE;
          border-left: 5px #2089e5 solid;
          color: #32ADF7;
        }
      }
    }
    .rightBox{
      background-color: #ffffff;
      .rightTop{
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #82aeea;
        margin-bottom: 15px;
        .save{
          width: 84px;
          height: 31px;
          margin: 0 15px;
          display: flex;
          align-items: center;
        }
      }
      .content {
        padding: 15px;
        height: calc(100% - 30px);
        .el-collapse-item__header{
          background-color: #edf4ff;
        }
      }
    }
    header{
      .headline{
        height: 52px;
        display: flex;
        color: #FFF;
        justify-content: space-between;
        align-items: center;
        padding:  0 15px;
        line-height: 40px;
        font-size: 16px;
        .el-button{
          height: 34px;
        }
      }
      .msg{
        height: 32px;
        background: #E5F8F7;
        color: #59D3C0;
        line-height: 32px;
        padding-left: 15px;
      }
    }
  }
  .headLeft{
    background: url(../../../assets/authority1.png) no-repeat;
    background-size: 100% 100%;
  }
  .headRight{
    background: url(../../../assets/authority2.png) no-repeat;
    background-size: 100% 100%;
  }
  .checkedAll{
    line-height: 58px;
    padding-left: 5px;
  }
  .content{
    /deep/.el-collapse-item__header, /deep/.el-collapse-item__wrap{
      border: none;
      padding: 0 20px;
    }
  }
  /deep/.el-collapse-item__header{
    background: #00507b;
    height: 32px;
  }
  /deep/ .el-collapse-item__content {
      padding-bottom: 0;
      // height: 157px;
      line-height: 50px;
  }
  /deep/.el-checkbox{
    margin-right: 40px!important;
  }
  .el-collapse-item:nth-child(4){
    /deep/ .el-collapse-item__content{
      height: 200px;
      display: flex;
      justify-content: space-between;
    }
  }
  .icon-biaozhu{
    font-size: 12px;
    margin-right: 5px;
    color: #fda96b;
  }
  .el-collapse{
    border: 0;
  }
  .icon-message{
    font-size: 20px;
    margin-right: 10px;
    color: #fda96b;
  }
}
</style>